<template>
    <div class="page">
        <el-form :model="form" :rules="rules" ref="formRef" class="p-4">
			<el-form-item prop="name" label="网点名称" label-width="80px">
				<el-input v-model="form.name" placeholder="请输入网点名称">></el-input>
			</el-form-item>
			<el-form-item prop="province" label="省份" label-width="80px">
				<el-input v-model="form.province" placeholder="请输入省份名称">></el-input>
			</el-form-item>
			<el-form-item prop="city" label="城市" label-width="80px">
				<el-input v-model="form.city" placeholder="请输入城市名称">></el-input>
			</el-form-item>
			<el-form-item prop="district" label="区" label-width="80px">
				<el-input v-model="form.district" placeholder="请输入市区名称">></el-input>
			</el-form-item>
			<el-form-item prop="centerLat" label="纬度" label-width="80px">
				<el-input v-model="form.centerLat" placeholder="请输入纬度">></el-input>
			</el-form-item>
			<el-form-item prop="centerLng" label="经度" label-width="80px">
				<el-input v-model="form.centerLng" placeholder="请输入经度">></el-input>
			</el-form-item>
			<el-form-item prop="radius" label="半径(米)" label-width="80px">
				<el-input v-model="form.radius" type="number" placeholder="请输入半径">></el-input>
			</el-form-item>
			<el-form-item>
				<el-button @click="cancel">取消</el-button>
				<el-button type="primary" @click="submit">保存</el-button>
			</el-form-item>
		</el-form>
    </div>
</template>
    
<script setup lang='ts'>
import router from '@/router';
import request from '@/utils/request';
import type { Outlet } from '@/utils/type';
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import { useRoute } from 'vue-router';

const formRef = ref<FormInstance>();

const route = useRoute();

const form = ref({
	"centerLat": "",
	"centerLng": "",
	"city": "",
	"district": "",
	"id": 0,
	"name": "",
	"province": "",
	"radius": ''
});

const rules = reactive<FormRules<Outlet>>({
    centerLat: [
        {
            required: true,
            trigger: 'change',
            message: '请输入经度',
        }
    ],
    centerLng: [
        {
            required: true,
            trigger: 'change',
            message: '请输入纬度',
        }
    ],
    city: [
        {
            required: true,
            trigger: 'change',
            message: '请输入城市名称',
        }
    ],
    district: [
        {
            required: true,
            trigger: 'change',
            message: '请输入城市区域',
        }
    ],
    name: [
        {
            required: true,
            trigger: 'change',
            message: '请输入网点名称',
        }
    ],
    province: [
        {
            required: true,
            trigger: 'change',
            message: '请输入省份',
        }
    ],
    radius: [
        {
            required: true,
            trigger: 'change',
            message: '请输入半径(米)',
        }
    ],
});

const cancel = async () => {
    try {
        await ElMessageBox.confirm("确定取消?", "提示", {
            confirmButtonText: '确定',
            cancelButtonText: '取消'
        });
        router.back();
    } catch (error) {
        
    }  
};

const getDetail = async () => {
    try {
        form.value = await request({
            url: '/api/sys/outlet/getOneById',
            method: 'post',
            contentTypeIsForm: true,
            data: {
                id: route.params.id
            },
            showLoading: {},
            errorToast: true
        });
    } catch (error) {
        
    }
};

const submit = async () => {
    try {
        await formRef.value?.validate();
        request({
            url: '/api/sys/outlet/save',
            method: 'post',
            contentTypeIsForm: false,
            showLoading: {},
            errorToast: true,
            data: {
                ...form.value,
                id: route.params.id
            }
        });
        ElMessage.success("保存成功");

    } catch (error) {
        
    }
};

onMounted(() => {
    if (Number(route.params.id) > 0) {
        getDetail();
    }
});
</script>
    
<style lang="scss" scoped>
    
</style>